<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root">

    </div>
</body>
<script src="../react@17.js"></script>
<script src="../react-dom@17.js"></script>
<script src="../babel.js"></script>
<script type="text/babel">
    /* 
    在react中组件分为两大类：
    1. 函数式组件(无状态组件)：通常用来做纯渲染工作
    2. class类组件(有状态组合)：可以用来维护组件状态
    */
    // 在reac组件中 组件名称首字母必须大写,如果首字母小写的话js会将其识别成html标签 app=> <app/>
    // 在react组件中 组件返回的虚拟节点 只允许有一个根标签
   // 定义函数式组件  
    function App(){
        let list = [1,2,3,4,5,6]
        return (
            <div>
                <h1 style={{color:'red'}}>初识函数式组件</h1>
                <ul>
                {
                    list.map((item,index)=>{
                        return <li key={index} onClick={()=>{
                            alert(item)
                        }}>{item}</li>
                    })
                }    
                </ul>
                <Header/>
                <Footer/>
            </div>
        )
    }
    function Header(){
        return (
            <div>header内容</div>
        )
    }
    function Footer(){
        return (
            <div>footer</div>
        )
    }
    //console.log(<App/>) // App();
    // console.log(app())
    ReactDOM.render(<App/>,document.getElementById("root"))
</script>
</html>